<html>
<head>
    <meta charset="UTF-8">
    <title>扇形绘制</title>
    <style>
        .shanxing{
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: yellow;
        }
        .sx1{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(0deg);
            clip: rect(0px,100px,200px,0px); /*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
            border-radius: 100px;
            background-color: #f00;
            /*-webkit-animation: an1 2s infinite linear; */
        }
        .sx2{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(0deg);
            clip: rect(0px,100px,200px,0px);
            border-radius: 100px;
            background-color: #f00;
            /*-webkit-animation: an2 2s infinite linear;*/
        }
        /*绘制一个60度扇形*/
        .shanxing1 .sx1{transform: rotate(-30deg);}
        .shanxing1 .sx2{transform: rotate(-150deg);}

        /*绘制一个85度扇形*/
        .shanxing2 .sx1{transform: rotate(-45deg);}
        .shanxing2 .sx2{transform: rotate(-140deg);}

        /*绘制一个向右扇形，90度扇形*/
        .shanxing3 .sx1{transform: rotate(45deg);}
        .shanxing3 .sx2{transform: rotate(-45deg);}

        /*绘制一个颜色扇形 */
        .shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;}
        .shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}

        /*绘制一个不同颜色半圆夹角 */
        .shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;}
        .shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;}
        .box{
        	width: 50px;
        	height: 50px;
        	background-color: #fff;
        	border-radius:50%;
        	position: relative;
        	background-color: green;
        }
         .box1 {
        	width: 50px;
        	height: 50px;
        	position: absolute;
        	clip: rect(0px,25px,50px,0px);
        	background-color: red;
        	border-radius: 50%;
        	transform: rotate(0deg);
        	/*background-color: green;*/
        }
        .box2 {
        	width: 50px;
        	height: 50px;
        	position: absolute;
        	clip: rect(0px,50px,50px,25px);
        	background-color: red;
        	border-radius: 50%;
        	transform: rotate(0deg);
        	/*background-color: green;*/
        }
</style>
</head>

<body>
	<div class="box">
		<div class="box1">
		</div>
		<div class="box2">
		</div>
	</div>
	<div class="hhh">
		
	</div>
	<script type="text/javascript">
		function Sector(pram){
				this.radius=parseInt(pram.radius)||50;//半径
				this.deg=parseInt(pram.deg)||parseInt(pram.deg)===0?pram.deg:90;//角度
				this.bgcolor=pram.bgcolor||"#FFFFFF";//背景色
				this.color=pram.color||"#5eb3ee";//扇形色
		}
		Sector.prototype.createSector=function(){
			/*扇形容器的CSS*/
			var wrapJson={
			"width":this.radius*2,
        	"height":this.radius*2,
			"border-radius":"50%",
        	"position": "relative",
        	"background-color":this.color,
        	"background-color":this.color,
			}
			/*左边覆盖的js*/
			var leftJson={
				"width":this.radius*2,
        		"height":this.radius*2,
	        	"position": "absolute",
	        	"clip":"rect(0px,"+this.radius+"px,"+this.radius*2+"px,0px)",
	        	"border-radius": "50%",
			}
			var rightJson={
				"width":this.radius*2,
        		"height":this.radius*2,
	        	"position": "absolute",
	        	"border-radius": "50%",
	        	"clip":"rect(0px,"+this.radius*2+"px,"+this.radius*2+"px,"+this.radius+"px)",
			}
			this.wrapDom=drawDom(document.createElement("div"),wrapJson);
			this.leftDom=drawDom(document.createElement("div"),leftJson);
			this.rightDom=drawDom(document.createElement("div"),rightJson);
			this.wrapDom.appendChild(this.leftDom);
			this.wrapDom.appendChild(this.rightDom);
			 this.drawDeg();
			return this.wrapDom;
			/*渲染dom*/
			function drawDom(obj,cssJson){
				var wrapcss="";
				for(var item in cssJson){
				wrapcss+=item+":"+cssJson[item]+";";
				}
				obj.style.cssText=wrapcss;
				return obj;
			}
		}
		/*画度数*/
		Sector.prototype.drawDeg=function(nowdeg){
			 nowdeg=nowdeg?nowdeg%360:this.deg%360;
			if(nowdeg>=0)
			{
				this.leftDom.style.cssText+="background-color:" +this.bgcolor+";transform:rotate(0deg)";
				if(nowdeg<=180)
					this.rightDom.style.cssText+="background-color:"+this.bgcolor+";transform:rotate("+nowdeg+"deg)";
				else
					this.rightDom.style.cssText+="background-color:"+this.color+";transform:rotate("+(nowdeg-180)+"deg)";
			}else{
				this.rightDom.style.cssText+="background-color:"+this.bgcolor+";transform:rotate(0deg)";
				if(nowdeg>=-180)
				this.leftDom.style.cssText+="background-color:"+this.bgcolor+";transform:rotate("+nowdeg+"deg)";
				else
				{
					this.leftDom.style.cssText+="background-color:"+this.bgcolor+";transform:rotate(180deg)";
					this.rightDom.style.cssText+="background-color:"+this.color+";transform:rotate("+(360+nowdeg)+"deg)";
				}
			}
		}
		
		var a= new Sector({deg:680});
	    document.querySelector(".hhh").appendChild(a.createSector());
//	    setInterval(function(){
//	    	a.drawDeg(deg++);
////	    	console.log(deg++)
//	    },10)
	</script>
</body> 
</html>